<template>
  <div class="contract-business">
    <a-card title="生成业务">
      <div slot="extra">
        <!--          <a-button type="danger" style="margin-right:5px" @click="$router.push({ name: 'BusinessList', params: { type: 'status2_1' } })"><a-icon type="eye"></a-icon>已开启材料未提交业务</a-button>-->
        <a-button icon="plus" :disabled="query.status == 20 || query.status == 30 || query.status == 34 || query.status == 40 || query.status == 44" type="primary" @click="businessModal">
          添加业务
        </a-button>
      </div>
      <a-table
        bordered
        size="middle"
        :row-key="(record) => record.cb_id"
        :columns="selectedColumns"
        :data-source="selectedData"
        :pagination="{ pageSize: 10, total: totalCount }"
      >
        <template slot="contract_index" slot-scope="text, record, index">
          {{ index + 1 }}
        </template>
        <template slot="status" slot-scope="text">
          <a-tag :color="text == 20 ? 'blue' : (text == 10 ? '' : 'red')">{{ statusOpts[text] }}</a-tag>
        </template>
        <template slot="additional_items">
          <a-button shape="circle" icon="plus" size="small" style="margin-right: 10px" @click="businessModal"/>
          <a-button size="small" type="danger" style="margin-right: 10px">清除</a-button>
          <span>560</span>
        </template>
        <template slot="additional_content">
          <span>1.XXXXXX 60</span>
          <a-button type="link" @click="showAffix">查看</a-button>
        </template>
        <template slot="action" slot-scope="text, record">
          <a-button size="small" :disabled="record.status1 == 20" type="danger" @click="onDel(record.cb_id)">
            删除
          </a-button>
          <!--            <a-button size="small" type="danger" @click="onDel(record.cb_id)">删除</a-button>-->
        </template>
      </a-table>
    </a-card>
    <a-modal
      centered
      title="选择业务"
      destroy-on-close
      :maskClosable="false"
      :width="1200"
      v-model="visible"
      @ok="onSubBusiness"
      :confirm-loading="confirmLoading"
      @cancel="() => this.seletedData = []"
    >
      <a-checkbox-group
        v-model="businessData"
        @change="onChange"
      >
        <a-spin :spinning="loading">
          <a-tabs type="card">
            <a-tab-pane key="10" tab="商标">
              <div class="business-checkbox-group">
                <div
                  class="b_group"
                >
                  <a-row :gutter="[0, 20]" v-for="item in sourceData[10]" :key="item.business_id">
                    <a-col :span="24">
                      <span class="group-name">{{ item.name }}</span>
                    </a-col>
                    <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                      <a-checkbox :value="items">
                        <a-tooltip v-if="items.name_desc != ''">
                          <template slot="title">
                            {{ items.name_desc }}
                          </template>
                          <ellipsis :length="30">{{ items.name }}</ellipsis>
                        </a-tooltip>
                        <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="20" tab="专利">
              <div class="business-checkbox-group">
                <div
                  class="b_group"
                >
                  <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[20]" :key="index">
                    <a-col :span="24">
                      <span class="group-name">{{ item.name }}</span>
                    </a-col>
                    <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                      <a-checkbox :value="items">
                        <a-tooltip v-if="items.name_desc != ''">
                          <template slot="title">
                            {{ items.name_desc }}
                          </template>
                          <ellipsis :length="30">{{ items.name }}</ellipsis>
                        </a-tooltip>
                        <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="30" tab="版权">
              <div class="business-checkbox-group">
                <div
                  class="b_group"
                >
                  <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[30]" :key="index">
                    <a-col :span="24">
                      <span class="group-name">{{ item.name }}</span>
                    </a-col>
                    <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                      <a-checkbox :value="items">
                        <a-tooltip v-if="items.name_desc != ''">
                          <template slot="title">
                            {{ items.name_desc }}
                          </template>
                          <ellipsis :length="30">{{ items.name }}</ellipsis>
                        </a-tooltip>
                        <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="40" tab="设计">
              <div class="business-checkbox-group">
                <div
                  class="b_group"
                >
                  <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[40]" :key="index">
                    <a-col :span="24">
                      <span class="group-name">{{ item.name }}</span>
                    </a-col>
                    <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                      <a-checkbox :value="items">
                        <a-tooltip v-if="items.name_desc != ''">
                          <template slot="title">
                            {{ items.name_desc }}
                          </template>
                          <ellipsis :length="30">{{ items.name }}</ellipsis>
                        </a-tooltip>
                        <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="50" tab="国际">
              <div class="business-checkbox-group">
                <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[50]" :key="index">
                  <a-col :span="24">
                    <span class="group-name">{{ item.name }}</span>
                  </a-col>
                  <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                    <a-checkbox :value="items">
                      <a-tooltip v-if="items.name_desc != ''">
                        <template slot="title">
                          {{ items.name_desc }}
                        </template>
                        <ellipsis :length="30">{{ items.name }}</ellipsis>
                      </a-tooltip>
                      <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                    </a-checkbox>
                  </a-col>
                </a-row>
              </div>
            </a-tab-pane>
            <a-tab-pane key="60" tab="高新">
              <div class="business-checkbox-group">
                <div
                  class="b_group"
                >
                  <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[60]" :key="index">
                    <a-col :span="24">
                      <span class="group-name">{{ item.name }}</span>
                    </a-col>
                    <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                      <a-checkbox :value="items">
                        <a-tooltip v-if="items.name_desc != ''">
                          <template slot="title">
                            {{ items.name_desc }}
                          </template>
                          <ellipsis :length="30">{{ items.name }}</ellipsis>
                        </a-tooltip>
                        <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="70" tab="资产">
              <div class="business-checkbox-group">
                <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[70]" :key="index">
                  <a-col :span="24">
                    <span class="group-name">{{ item.name }}</span>
                  </a-col>
                  <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                    <a-checkbox :value="items">
                      <a-tooltip v-if="items.name_desc != ''">
                        <template slot="title">
                          {{ items.name_desc }}
                        </template>
                        <ellipsis :length="30">{{ items.name }}</ellipsis>
                      </a-tooltip>
                      <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                    </a-checkbox>
                  </a-col>
                </a-row>
              </div>
            </a-tab-pane>
            <a-tab-pane key="80" tab="ISO">
              <div class="business-checkbox-group">
                <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[80]" :key="index">
                  <a-col :span="24">
                    <span class="group-name">{{ item.name }}</span>
                  </a-col>
                  <a-col :span="12" v-for="items in item.data" :key="items.business_id">
                    <a-checkbox :value="items">
                      <a-tooltip v-if="items.name_desc != ''">
                        <template slot="title">
                          {{ items.name_desc }}
                        </template>
                        <ellipsis :length="80">【{{ epOpts[items.enterprise_persons] }}】【{{ atOpts[items.auth_type] }}】【{{ riOpts[items.risk] }}】{{ items.name }}</ellipsis>
                      </a-tooltip>
                      <ellipsis v-else :length="80">[{{ epOpts[items.enterprise_persons] }}][{{ atOpts[items.auth_type] }}][{{ riOpts[items.risk] }}]{{ items.name }}</ellipsis>
                    </a-checkbox>
                  </a-col>
                </a-row>
              </div>
            </a-tab-pane>
            <a-tab-pane key="90" tab="国际商标">
              <div class="business-checkbox-group">
                <div
                  class="b_group"
                >
                  <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[90]" :key="index">
                    <a-col :span="24">
                      <span class="group-name">{{ item.name }}</span>
                    </a-col>
                    <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                      <a-checkbox :value="items">
                        <a-tooltip v-if="items.name_desc != ''">
                          <template slot="title">
                            {{ items.name_desc }}
                          </template>
                          <ellipsis :length="30">{{ items.name }}</ellipsis>
                        </a-tooltip>
                        <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="100" tab="国际专利">
              <div class="business-checkbox-group">
                <div
                  class="b_group"
                >
                  <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[100]" :key="index">
                    <a-col :span="24">
                      <span class="group-name">{{ item.name }}</span>
                    </a-col>
                    <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                      <a-checkbox :value="items">
                        <a-tooltip v-if="items.name_desc != ''">
                          <template slot="title">
                            {{ items.name_desc }}
                          </template>
                          <ellipsis :length="30">{{ items.name }}</ellipsis>
                        </a-tooltip>
                        <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="110" tab="3A">
              <div class="business-checkbox-group">
                <div
                  class="b_group"
                >
                  <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[110]" :key="index">
                    <a-col :span="24">
                      <span class="group-name">{{ item.name }}</span>
                    </a-col>
                    <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                      <a-checkbox :value="items">
                        <a-tooltip v-if="items.name_desc != ''">
                          <template slot="title">
                            {{ items.name_desc }}
                          </template>
                          <ellipsis :length="30">{{ items.name }}</ellipsis>
                        </a-tooltip>
                        <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="120" tab="400">
              <div class="business-checkbox-group">
                <div
                  class="b_group"
                >
                  <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[120]" :key="index">
                    <a-col :span="24">
                      <span class="group-name">{{ item.name }}</span>
                    </a-col>
                    <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                      <a-checkbox :value="items">
                        <a-tooltip v-if="items.name_desc != ''">
                          <template slot="title">
                            {{ items.name_desc }}
                          </template>
                          <ellipsis :length="30">{{ items.name }}</ellipsis>
                        </a-tooltip>
                        <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="300" tab="其他">
              <div class="business-checkbox-group">
                <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[300]" :key="index">
                  <a-col :span="24">
                    <span class="group-name">{{ item.name }}</span>
                  </a-col>
                  <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                    <a-checkbox :value="items">
                      <a-tooltip v-if="items.name_desc != ''">
                        <template slot="title">
                          {{ items.name_desc }}
                        </template>
                        <ellipsis :length="30">{{ items.name }}</ellipsis>
                      </a-tooltip>
                      <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                    </a-checkbox>
                  </a-col>
                </a-row>
                <!--                    <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[300]" :key="index">-->
                <!--                      <a-col :span="24">-->
                <!--                        <span class="group-name">{{item.name}}</span>-->
                <!--                      </a-col>-->
                <!--                      <a-col :span="6" v-for="items in item.data" :key="items.business_id">-->
                <!--                        <a-checkbox :value="items">-->
                <!--                          <ellipsis :length="30" tooltip>{{items.name}}</ellipsis>-->
                <!--                        </a-checkbox>-->
                <!--                      </a-col>-->
                <!--                    </a-row>-->
              </div>
            </a-tab-pane>
          </a-tabs>
          <a-divider />
          <a-table
            bordered
            size="middle"
            :loading="loading2"
            :row-key="(record) => record.business_id"
            :columns="businessColumns"
            :data-source="businessData"
          >
            <template slot="contract_index" slot-scope="text, record, index">
              {{ index + 1 }}
            </template>
            <template slot="category" slot-scope="text">
              {{ catOptions[text] }}
            </template>
            <template v-for="col in ['offer_section_lft', 'bus_num']" :slot="col" slot-scope="text, record">
              <div :key="col">
                <a-input-number
                  :default-value="col == 'offer_section_lft' ? parseInt(record.offer_section_lft) : record.bus_num"
                  :value="col == 'offer_section_lft' ? parseInt(record.offer_section_lft) : record.bus_num"
                  :min="1"
                  @change="e => handleChange(e, record.business_id, col)"
                />
              </div>
            </template>
            <template slot="row_num" slot-scope="text,record">
              {{ record.offer_section_lft * record.bus_num }}
            </template>
            <template slot="additional_items" slot-scope="text, record">
              <a-button shape="circle" icon="plus" size="small" style="margin-right: 10px" @click="addItem(record.business_id, record.name, record.bus_num)"/>
              <a-button size="small" type="danger" style="margin-right: 10px" @click="delExt(record.business_id)">清除</a-button>
              <span>{{extAmount[record.business_id]}}</span>
            </template>
            <template slot="additional_content">
              <span>1.XXXXXX 60</span>
              <a-button type="link" @click="showAffix">查看</a-button>
            </template>
            <template slot="action" slot-scope="text,record,index">
              <a-button style="margin-right:5px" type="danger" size="small" @click="delItem(index,record.business_id)">删除</a-button>
              <a-button type="primary" size="small" @click="addItem(record.business_id, record.name, record.bus_num)">增项</a-button>
            </template>
            <template slot="footer">
              <div class="tb-footer">
                ￥{{ amount }}
              </div>
            </template>
          </a-table>
        </a-spin>
      </a-checkbox-group>
    </a-modal>
    <ext-modal
      v-if="addVisible"
      :business-id="addForm.business_id"
      :business-name="addForm.business_name"
      :business-num="addForm.business_num"
      @cancel="onCancel"
      @change="changeExt"
    >
    </ext-modal>
  </div>
</template>

<script>
  import storage from 'store'
  import { Ellipsis } from '@/components'
  import ExtModal from './ExtModal'
  import { getBusiness, getSelectedBus, delSelectedBus, addSelectedBus } from '@/api/contract'
  import contractColumns from '@/columns/contract'

  export default {
    components: {
      Ellipsis,
      ExtModal
    },
    props: {
      query: {
        type: Object,
        defalut: () => {}
      }
    },
    name: 'Business2',
    data () {
      return {
        selectedColumns: contractColumns.selected,
        businessColumns: contractColumns.business,
        selectedData: [], // 现有业务列表
        businessData: [], // 全部业务列表
        sourceData: [], // 渲染视图所需列表
        visible: false,
        loading: true,
        loading2: false,
        data: [],
        queryParam: this.query,
        catOptions: {},
        statusOpts: {},
        businessList: {},
        confirmLoading: false,
        riOpts: {},
        epOpts: {},
        atOpts: {},
        totalCount: 0,
        addVisible: false,
        addForm: {},
        zxData: {},
        extAmount: {},
        extValue: {},
        beforeForm: {},
        zxColumns: {},
        pagination: {}
      }
    },
    created () {
      this.getSelected(this.queryParam['contract_id'])
    },
    computed: {
      amount () {
        let total = 0
        for (const k in this.businessData) {
          total += this.businessData[k].offer_section_lft * this.businessData[k].bus_num
        }
        return total
      }
    },
    methods: {
      getSelected (id) {
        const app = this
        const query = {}
        query['filter[contract_id]'] = id
        query['page_size'] = 1000
        getSelectedBus(query).then(res => {
          if (res.status === 0) {
            app.statusOpts = res.result['status1_opts']
            app.selectedData = res.result['data']
            app.totalCount = res.result.total_count
          }
        })
      },
      getList () {
        const app = this
        app.businessData = []
        getBusiness().then(res => {
          const result = res.result['businesses']
          app.catOptions = res.result['category_opts']
          app.riOpts = res.result['riOpts']
          app.epOpts = res.result['epOpts']
          app.atOpts = res.result['atOpts']
          const target = {}
          if (res.status === 0) {
            for (const k in result) {
              if (result[k].data.hasOwnProperty('')) {
                target[k] = result[k].data[''].data
              } else {
                target[k] = result[k].data
              }
            }
            app.sourceData = target
            app.loading = false
          }
        })
      },
      delItem (key, id) {
        const app = this
        const arr = this.businessData
        arr.splice(key, 1)
        if (Object.keys(storage.get('EXT_COLUMNS')).length === 1) {
          storage.remove('EXT_DATA')
          storage.remove('EXT_VALUE')
          storage.remove('EXT_AMOUNT')
          storage.remove('EXT_ADDFORM')
          storage.remove('EXT_BEFOREFORM')
          storage.remove('EXT_PAGINATION')
          storage.remove('EXT_COLUMNS')
        } else {
          delete app.beforeForm[id]
          delete app.zxData[id]
          delete app.extValue[id]
          delete app.addForm[id]
          delete app.zxColumns[id]
          delete app.extAmount[id]
          delete app.extValue[id]
          const data1 = storage.get('EXT_DATA')
          const data2 = storage.get('EXT_VALUE')
          const data3 = storage.get('EXT_AMOUNT')
          const data4 = storage.get('EXT_ADDFORM')
          const data5 = storage.get('EXT_BEFOREFORM')
          const data6 = storage.get('EXT_PAGINATION')
          const data7 = storage.get('EXT_COLUMNS')
          delete data1[id]
          delete data2[id]
          delete data3[id]
          delete data4[id]
          delete data5[id]
          delete data6[id]
          delete data7[id]
          storage.set('EXT_DATA', data1)
          storage.set('EXT_VALUE', data2)
          storage.set('EXT_AMOUNT', data3)
          storage.set('EXT_ADDFORM', data4)
          storage.set('EXT_BEFOREFORM', data5)
          storage.set('EXT_PAGINATION', data6)
          storage.set('EXT_COLUMNS', data7)
        }
      },
      addItem (id, name, num) {
        this.addForm['business_id'] = id
        this.addForm['business_name'] = name
        this.addForm['business_num'] = num
        if (Object.keys(this.zxColumns).length !== 0) {
          storage.set('EXT_DATA', this.zxData)
          storage.set('EXT_VALUE', this.extValue)
          storage.set('EXT_AMOUNT', this.extAmount)
          storage.set('EXT_ADDFORM', this.addForm)
          storage.set('EXT_BEFOREFORM', this.beforeForm)
          storage.set('EXT_PAGINATION', this.pagination)
          storage.set('EXT_COLUMNS', this.zxColumns)
        }
        this.addVisible = true
      },
      onCancel (visible) {
        this.addVisible = visible
      },
      onDel (id) {
        const app = this
        app.$confirm({
          title: '确定删除这条业务吗?',
          onOk: () => {
            const params = Object.assign({ contract_id: app.queryParam['contract_id'] }, { cb_id: id })
            delSelectedBus(params).then(res => {
              if (res.status === 0) {
                app.getSelected(app.queryParam['contract_id'])
                app.$emit('addBusiness')
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          }
        })
      },
      onChange (checkedValues) {
        const _businessData = this.businessData
        for (const k in checkedValues) {
          _businessData[k] = checkedValues[k]
          if (!_businessData[k].bus_num) _businessData[k].bus_num = 1
        }
      },
      handleChange (value, key, column) {
        const app = this
        const newBusiness = [...app.businessData]
        const target = newBusiness.filter(item => key === item.business_id)[0]
        if (target) {
          target[column] = value
          app.businessData = newBusiness
        }
      },
      businessModal () {
        this.visible = true
        storage.remove('EXT_DATA')
        storage.remove('EXT_VALUE')
        storage.remove('EXT_AMOUNT')
        storage.remove('EXT_ADDFORM')
        storage.remove('EXT_BEFOREFORM')
        storage.remove('EXT_PAGINATION')
        storage.remove('EXT_COLUMNS')
        this.extAmount = {}
        this.getList()
      },
      onSubBusiness () {
        const app = this
        const businesses = {}
        app.confirmLoading = true
        for (let i = 0; i < app.businessData.length; i++) {
          for (const k in app.businessData[i]) {
            if (k === 'official_fee') {
              businesses['businesses[' + app.businessData[i].business_id + ']' + '[official_fee]'] = app.businessData[i][k]
            }
            if (k === 'bus_num') {
              businesses['businesses[' + app.businessData[i].business_id + ']' + '[num]'] = app.businessData[i][k]
            }
            if (k === 'offer_section_lft') {
              businesses['businesses[' + app.businessData[i].business_id + ']' + '[price]'] = app.businessData[i][k]
            }
          }
        }
        businesses['contract_id'] = app.queryParam['contract_id']
        addSelectedBus(businesses).then(res => {
          if (res.status === 0) {
            app.visible = false
            app.getSelected(app.queryParam['contract_id'])
            app.$emit('addBusiness')
            app.confirmLoading = false
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      showAffix () {
        this.$warning({
          title: '功能暂未开发'
        })
      },
      changeExt (id) {
        const app = this
        app.loading2 = true
        app.zxData[id] = storage.get('EXT_DATA')[id]
        app.extValue[id] = storage.get('EXT_VALUE')[id]
        app.extAmount[id] = storage.get('EXT_AMOUNT')[id]
        app.addForm[id] = storage.get('EXT_ADDFORM')[id]
        app.beforeForm[id] = storage.get('EXT_BEFOREFORM')[id]
        app.zxColumns[id] = storage.get('EXT_COLUMNS')[id]
        app.$nextTick(() => {
          app.loading2 = false
        })
        app.onCancel()
      },
      delExt (id) {
        const app = this
        delete app.beforeForm[id]
        delete app.zxData[id]
        delete app.extValue[id]
        delete app.addForm[id]
        delete app.zxColumns[id]
        delete app.extAmount[id]
        delete app.extValue[id]
      }
    }
  }
</script>

<style scoped>
  .business-checkbox-group {
    height: 300px;
    overflow-y: scroll;
    overflow-x: hidden
  }
  .group-name {
    background-color: #eee;
    font-weight: bold;
    padding: 5px 10px
  }
  .b_group {
    width: 100%;
    padding: 15px 15px 0 15px
  }
  .tb-footer {
    text-align: right;
    font-size: 18px;
    font-weight: bold;
    color: #f00
  }
  .tb-footer2 {
    text-align: right;
    font-size: 14px;
    color: #f00
  }
</style>
